<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();



const asideRouter = computed(() => router.getRoutes().filter(item => item.meta.isShow))
onMounted(() => {
  // console.log("router.getRoutes()", router.getRoutes())
  // console.log("route.path", route.path)
})
</script>

<template>
  <div class="aside">
    <div class="aside-title">Default colors</div>
    <el-menu :default-active="route.path" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF"
      class="el-menu-demo" mode="vertical" router>
      <el-menu-item v-for="(item, index) in asideRouter" :key="index" :index="item.path">
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>

</template>

<style scoped lang="scss">
.aside{
  height: calc(100vh - 60px);
  .aside-title{
      height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2d3748;
        color: #fff;
  }
}
</style>